<template>
	<view>
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<div class="goodsAsk-page">
           <div class="goodsAsk-top">
				<div class="goods-img" v-if="goodsInfoObj.hasOwnProperty('goodsImages')&&goodsInfoObj.goodsImages.length">
					<img :src="goodsInfoObj.goodsImages[0]" style="width:100%;height:100%;object-fit: cover"/>
				</div>
				<div class="goods-info">
					<div class="goods-name">{{goodsInfoObj.goodsName}}</div>
				</div>
		    </div>
            <div class="ask-con">
                <u--form
				:model="sendForm"
                :errorType="errorType"
				:rules="rules"
				ref="sendForm">
                    <u-form-item prop="content">
						<u--textarea v-model="sendForm.content" height="140" border="none" placeholder="输入您想要问的问题,我们将邀请其它用户帮您解答~"></u--textarea>
					</u-form-item>
                </u--form>
            </div>
            <div class="goodsAsk-bottom">
                <u-button text="确认提交" shape="circle" color="linear-gradient(90deg, #FF8D27 0%, #FF6600 100%)" :loading="btnLoading"  @click="saveForm"></u-button>
            </div>
        </div>
	</view>
</template>

<script>
import { goodsInfo } from '@/config/api.js';
import { addQuestionAPI } from '@/config/goods.js';
const defaultSendForm = {
  content: '',
  goodsId: '',//问
}
export default {
    name: 'submitQuestions',
    data() {
        return {
            goodsId: '',
            goodsInfoObj:{},
            btnLoading: false,
            sendForm: JSON.parse(JSON.stringify(defaultSendForm)),
            errorType:'toast',
            rules: {
				content: [
					{
						required: true,
						message: '请输入您想问的问题哦。',
						trigger: ['blur']
					}
				]
			}
        }
    },
    async onLoad(options) {
        await this.$onLaunched;
        this.goodsId = options.goodsId;
        this.getInfo();
    },
    methods: {
        saveForm(){
		   this.$refs.sendForm.validate().then(res => {
			   this.btnLoading = true;
               let data = JSON.parse(JSON.stringify(this.sendForm));
               data.goodsId = this.goodsId;
			   addQuestionAPI(data).then(() => {
				    uni.showToast({
						title: '您的提问已提交成功,我们会尽快审核',
						duration:1000,
						icon:'none'
					})
				   setTimeout(()=>{
				   	this.btnLoading = false;
				   	uni.hideLoading();
				   	uni.navigateBack();
				   },1000)
				}).catch(()=>{
					this.btnLoading = false;
				})
		   }).catch(errors => {
		   	
		   })
	   },
        getInfo() {
			goodsInfo({ goodsId: this.goodsId }).then((res) => {
                this.goodsInfoObj = res;
			})
		},
    },

};
</script>

<style lang="scss">
.goodsAsk-page{
	background: #F8F8F8;
	min-height:100%;
	padding-bottom:80px;
    .goodsAsk-top{
		padding:16px;
		background: #fff;
		display: flex;
		justify-items: flex-start;
		align-items: center;
        .goods-img{
			width:65px;
			height:65px;
		}
        .goods-info{
			padding-left:20px;
            .goods-name{
                font-size: 14px;
                line-height: 20px;
                color: #000000;
            }
		}
	}
    .ask-con{
		padding:16px;
	}
    .ask-con-div{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
	}
    .goodsAsk-bottom{
		padding:8px;
		position: fixed;
		bottom:0;
		width:100%;
		background: #fff;
		left:0;
		box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
	}
}

</style>